<html>
<head>
    <title>弹出一个窗口后，后面的层不可操作</title>
    <script>
        function show()  //显示隐藏层和弹出层
        {
            var hideobj = document.getElementById("hidebg");
            hidebg.style.display = "block";  //显示隐藏层
            hidebg.style.height = document.body.clientHeight + "px";  //设置隐藏层的高度为当前页面高度
            document.getElementById("hidebox").style.display = "block";  //显示弹出层
        }

        function hide()  //去除隐藏层和弹出层
        {
            document.getElementById("hidebg").style.display = "none";
            document.getElementById("hidebox").style.display = "none";
        }
    </script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            text-align: center;
        }

        #hidebg {
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #000;
            width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
            filter: alpha(opacity=60); /*设置透明度为60%*/
            opacity: 0.6; /*非IE浏览器下设置透明度为60%*/
            display: none; /* http://www.jb51.net */
            z-Index: 2;
        }

        #hidebox {
            position: absolute;
            width: 400px;
            height: 300px;
            top: 200px;
            left: 30%;
            background-color: #fff;
            display: none;
            cursor: pointer;
            z-Index: 3;
        }

        #content {
            text-align: center;
            cursor: pointer;
            z-Index: 1;
        }
    </style>
</head>
<body>
<div id="outerdiv"
     style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute;">
        <img id="bigimg" style="border:5px solid #fff;" src=""/>
    </div>
</div>

<div id="hidebg"></div>
<div id="hidebox" onClick="hide();">点击关闭</div>
<div id="content" onClick="show();">点击试试</div>
</body>
</html>